<template>
	<u-tabbar fixed :value="selected" @change="change1" activeColor="#1169DB" inactiveColor="#8F92A1"
		:placeholder="false" :safeAreaInsetBottom="true">
		<u-tabbar-item v-for="(item,index) in tabbarList" :text="item.text" :key="index"
			:badge="index == '1'?messageNumber:null">
			<image class="tabbar-icon" slot="active-icon" :src="item.selectedIconPath"></image>
			<image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	import store from '@/store'
	export default {
		name: "tab-bar",
		props: {
			selected: {
				type: Number
			}
		},
		data() {
			return {
				tabbarList: [{
					pagePath: '/pages/home/index',
					text: '首页',
					iconPath: '../static/tabbar/home.png',
					selectedIconPath: '../static/tabbar/home_active.png'
				}, {
					pagePath: '/pages/message/index',
					text: '消息',
					iconPath: '../static/tabbar/message.png',
					selectedIconPath: '../static/tabbar/message_active.png'
				}, {
					pagePath: '/pages/mine/index',
					text: '我的',
					iconPath: '../static/tabbar/user.png',
					selectedIconPath: '../static/tabbar/user_active.png'
				}],
				messageNumber: 0
			};
		},
		methods: {
			change1(val) {
				// 因为在pages中配置了需要跳转的页面为 tabbar页面 
				// 所以不能使用navigateTo 只能使用下面这个方法跳转。
				let userInfo = store.state.user.USER_INFO
				if (!userInfo) {
					// this.$eventBus.$emit('Home', 'login')
					uni.$u.toast('请先登录!')
					return
				}
				uni.switchTab({
					url: this.tabbarList[val].pagePath
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar-icon {
		margin-top: 6px;
		height: 50rpx;
		width: 50rpx;
	}
</style>